嗨~大家好，我是肉鬆。
是一位喜愛傑尼龜的人，傑尼、傑尼。

什麼是 Tailwind CSS？

在 官網 首頁的描述，可以看到 Tailwind CSS 是一套以 utility-first 為基礎的 CSS 框架。
讓開發者無需離開 HTML 即可快速構建現代網站。

何謂無需離開 HTML 即可快速構建現代網站？

舉個例子，這邊有一段 HTML。

<h1 class="title">我是標題</h1>

如果我們今天想要調整文字大小與字重 - 將樣式寫在 CSS。

.title {
  font-weight: bold;
  font-size: 1.5rem;
}

透過 Tailwind CSS - 將樣式寫在 HTML。

<h1 class="font-bold text-xl">我是標題</h1>

.font-bold {
  font-weight: bold;
}

.text-xl {
  font-size: 1.5rem;
}

本日重點

1. Tailwind CSS 是一套以 utility-first 為基礎的 CSS 框架。
2. 將樣式透過 class 直接寫在 HTML 標籤。

這是我第一次參加 iT 鐵人賽，選擇 Tailwind CSS 作為主題，藉由這次機會讓大家更了解 Tailwind CSS，有助於我們在開發過程能夠更加順暢、專注，謝謝大家。

參考

• Tailwind CSS 官網